---
type: tutorial
title: Erstelle deine erste Astro-Seite
description: |-
  Tutorial: Erstelle deinen ersten Astro-Blog —
  Füge deiner Website neue Seiten mit Navigationslinks zwischen ihnen hinzu
i18nReady: true
---

import Checklist from '~/components/Checklist.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Jetzt, da du weißt, dass `.astro`-Dateien für die Seiten deiner Website verantwortlich sind, ist es an der Zeit, eine zu erstellen!

<PreCheck>
  - zwei neue Seiten auf deiner Website zu erstellen: About und Blog
  - Navigationslinks zu deinen Seiten hinzuzufügen
  - eine aktualisierte Version deiner Website im Web zu veröffentlichen
</PreCheck>

## Eine neue `.astro`-Datei erstellen

<Steps>
1. Navigiere im Dateibereich deines Code-Editors zum Ordner `src/pages/`, in dem du die vorhandene Datei `index.astro` siehst.

2. Erstelle im selben Ordner eine neue Datei mit dem Namen `about.astro`.

3. Kopiere oder schreibe den Inhalt von `index.astro` in deine neue Datei `about.astro`.

    :::tip
    Dein Editor zeigt möglicherweise einen ausgefüllten weißen Kreis auf dem Tab der Datei an. Das bedeutet, dass die Datei noch nicht gespeichert wurde. Aktiviere im Menü „Datei“ in VS Code die Option **Auto Save**, damit du deine Dateien nicht mehr manuell speichern musst.
    :::

4. Füge am Ende der URL in der Adressleiste deines Website-Vorschaufensters `/about` hinzu und überprüfe, ob dort eine Seite geladen wird (z. B. `http://localhost:4321/about`).
</Steps>

Im Moment sollte deine „Über mich“-Seite genau wie deine Startseite aussehen, aber das werden wir gleich ändern!

## Bearbeite deine Seite

Bearbeite den HTML-Inhalt, um diese Seite über dich zu gestalten.

Um den Inhalt deiner About-Seite zu ändern oder zu erweitern, füge weitere HTML-Element-Tags mit Inhalt hinzu. Du kannst den folgenden HTML-Code zwischen die vorhandenen `<body></body>`-Tags einfügen oder deinen eigenen erstellen:

```astro title="src/pages/about.astro" ins={3-8} del={2}
<body>
  <h1>Meine Astro-Seite</h1>
  <h1>Über mich</h1>
  <h2>… und meine neue Astro-Seite!</h2>

  <p>Ich arbeite mich durch das einführende Astro-Tutorial. Dies ist die zweite Seite meiner Website und die erste, die ich selbst erstellt habe!</p>

  <p>Diese Website wird aktualisiert, während ich mehr vom Tutorial abschließe – schau also regelmäßig vorbei, um zu sehen, wie meine Reise verläuft!</p>
</body>
```

Besuche jetzt erneut deine `/about`-Seite in deinem Browser-Tab, und du solltest die aktualisierten Inhalte sehen.

## Navigationslinks hinzufügen

Um das Vorschauen aller Seiten zu erleichtern, füge HTML-Seitennavigationslinks vor deinem `<h1>` oben auf beiden Seiten (`index.astro` und `about.astro`) hinzu:

```astro title="src/pages/about.astro" ins={1-2}
<a href="/">Startseite</a>
<a href="/about/">Über mich</a>

<h1>Über mich</h1>
<h2>… und meine neue Astro-Seite!</h2>
```

Überprüfe, ob du diese Links anklicken kannst, um zwischen den Seiten deiner Website zu wechseln.

:::note
Im Gegensatz zu vielen Frameworks verwendet Astro standardmäßige HTML-`<a>`-Elemente, um zwischen Seiten (_Routes_) zu navigieren, mit traditionellen Seitenaktualisierungen.
:::

<Box icon="puzzle-piece">
## Probiere es selbst – Füge eine Blog-Seite hinzu

Füge eine dritte Seite `blog.astro` zu deiner Website hinzu, indem du [die gleichen Schritte wie oben](#eine-neue-astro-datei-erstellen) befolgst.

(Vergiss nicht, auf jeder Seite einen dritten Navigationslink hinzuzufügen.)

<details>
<summary>Zeige mir die Schritte.</summary>
<Steps>
1. Erstelle eine neue Datei unter `src/pages/blog.astro`.
2. Kopiere den gesamten Inhalt von `index.astro` in `blog.astro`.
3. [Füge einen dritten Navigationslink](#navigationslinks-hinzufügen) oben auf jeder Seite hinzu:
</Steps>

```astro title="src/pages/index.astro" ins={4}
<body>
  <a href="/">Startseite</a>
  <a href="/about/">Über mich</a>
  <a href="/blog/">Blog</a>

  <h1>Meine Astro-Seite</h1>
</body>
```
</details>
</Box>

Du solltest nun eine Website mit drei Seiten haben, die alle miteinander verlinkt sind. Jetzt ist es an der Zeit, Inhalte für die Blog-Seite hinzuzufügen.

Aktualisiere den Seiteninhalt in `blog.astro` wie folgt:

```astro astro title="src/pages/blog.astro" ins={7-8} del={6}
<body>
  <a href="/">Startseite</a>
  <a href="/about/">Über mich</a>
  <a href="/blog/">Blog</a>

  <h1>Meine Astro-Seite</h1>
  <h1>Mein Astro-Lernblog</h1>
  <p>Hier werde ich über meine Reise beim Lernen von Astro schreiben.</p>
</body>
```

Vorschau deiner gesamten Website, indem du alle drei Seiten in der Browser-Vorschau besuchst, und prüfe:
- Jede Seite verlinkt korrekt zu allen drei Seiten
- Deine beiden neuen Seiten haben jeweils eine aussagekräftige Überschrift
- Deine beiden neuen Seiten haben jeweils eigenen Absatztext

## Änderungen im Web veröffentlichen

Wenn du unserem Setup in Lektion 1 gefolgt bist, kannst du deine Änderungen über Netlify auf deiner Live-Website veröffentlichen.

Wenn du mit der Vorschau zufrieden bist, **committe** deine Änderungen in dein Online-Repository bei GitHub. 

<Steps>
1. Vorschau der Dateien in VS Code, die seit deinem letzten Commit zu GitHub geändert wurden. 

    - Gehe zum **Quellcode-Kontroll-Tab** im linken Menü. Dort sollte eine kleine „3“ angezeigt werden.

    - Du solltest `index.astro`, `about.astro` und `blog.astro` als geänderte Dateien sehen.

2. Gib eine Commit-Nachricht ein (z. B. „Zwei neue Seiten hinzugefügt – About und Blog“) und drücke <kbd>Strg + Enter</kbd> (macOS: <kbd>Cmd ⌘ + Return</kbd>), um die Änderungen in deinem aktuellen Workspace zu committen.

3. Klicke auf den Button <kbd>Sync Changes</kbd>, um die Änderungen mit GitHub zu synchronisieren.

4. Nach ein paar Minuten besuche deine Netlify-URL, um zu überprüfen, dass die Änderungen live veröffentlicht wurden.
</Steps>

:::tip[Regelmäßig committen und veröffentlichen]
Führe diese Schritte jedes Mal aus, wenn du eine Arbeitspause einlegst! Deine Änderungen werden in deinem GitHub-Repository aktualisiert. Wenn du auf einer Netlify-Website veröffentlicht hast, wird sie neu gebaut und erneut veröffentlicht.
:::

<Box icon="check-list">
## Checkliste

<Checklist>
- [ ] Ich kann eine neue Seite für meine Website erstellen und von einer bestehenden Seite darauf verlinken.
- [ ] Ich kann meine Änderungen zurück zu GitHub committen und meine Live-Seite auf Netlify aktualisieren.
</Checklist>
</Box>

### Ressourcen

- [Dateibasierte Routing in Astro](/de/basics/astro-pages/#dateibasiertes-routing)

- [Astro-Seiten-HTML](/de/basics/astro-pages/#astro-seiten)
